<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery箭头按钮切换图片</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }


    .box{
        margin-top: 80px;
        width: 100%;
        height: 340px;
        position: relative; /* 相对定位 */
    }

    .list{
        width: 1200px;
        height: 300px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -600px;
    }

    .btn{
        position: absolute; /* 绝对定位 */
        top: 50%;
        margin-top: -50px;
        width: 60px;
        height: 100px;
        line-height: 100px; /* 行高 */
        font-size: 30px;
        color: white;
        text-decoration: none; /* 文本修饰 */
        text-align: center;
        background: rgba(0,255,0,.5);
        cursor: pointer; /* 光标的样式 改为手指 */
    }
    .next{
        right: 0;
    }

    li{
        position: absolute;
        top: 0;
        left: 0;
        list-style: none;
        opacity: 0;
        transition: all 0.3s ease-out;
    }
    img{
        width: 751px;
        height: 300px;
        border:none;
        float: left;
    }
    .p1{
        transform:translate3d(-224px,0,0) scale(0.81);
        /* 3d位移 x,y,z
           x 代表横向坐标移向量的长度
           y 代表纵向坐标移向量的长度
           z 代表Z轴移向量的长度 取值不可为百分比
         */
    }
    .p2{
        transform:translate3d(0px,0,0) scale(0.81);
        transform-origin:0 50%;  /* 变形原点 */
        /*  top left | left top 等价于 0 0
            top | top center | center top 等价于 50% 0
            right top | top right 等价于 100% 0
            left | left center | center left 等价于 0 50%
            center | center center 等价于 50% 50%（默认值）
            right | right center | center right 等价于 100% 50%
            bottom left | left bottom 等价于 0 100%
            bottom | bottom center | center bottom 等价于 50% 100%
            bottom right | right bottom 等价于 100% 100%
         */
        /*
           left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
           top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;        如果只取一个值，表示垂直方向值不变。
         */

        opacity: 0.8;
        z-index: 2;
    }
    .p3{
        transform:translate3d(224px,0,0) scale(1);
        z-index: 3;
        opacity: 1;
    }
    .p4{
        transform:translate3d(449px,0,0) scale(0.81);
        transform-origin:100% 50%;
        opacity: 0.8;
        z-index: 2;
    }
    .p5{
        transform:translate3d(672px,0,0) scale(0.81);
    }
    .p6{
        transform:translate3d(896px,0,0) scale(0.81);
    }
    .p7{
        transform:translate3d(1120px,0,0) scale(0.81);
    }

</style>
<body>
<div class="box">

    <div class="list">
        <ul>
            <li class="p7"><a href="#"><img src="images/01.jpg" alt="" /></a></li>
            <li class="p6"><a href="#"><img src=images/02.jpg" alt="" /></a></li>
            <li class="p5"><a href="#"><img src="images/03.jpg" alt="" /></a></li>
            <li class="p4"><a href="#"><img src=images/04.jpg" alt="" /></a></li>
            <li class="p3"><a href="#"><img src="images/05.jpg" alt="" /></a></li>
           <!-- <li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li>
            <li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li>-->
        </ul>
    </div>

    <a href="javascript:;" class="prev btn"><</a>
    <a href="javascript:;" class="next btn">></a>
</div>
</body>
<script src="./js/jquery.js"></script>
    <script type="text/jscript">
    var cArr=["p7","p6","p5","p4","p3","p2","p1"];
    var index=0;
    $(".next").click( //下一张
        function(){
            nextimg();
        }
    )
    $(".prev").click( //上一张
        function(){
            previmg();
        }
    )
    //上一张
    function previmg(){
        cArr.unshift(cArr[6]); //向数组的开头添加一个或更多元素 并返回新的长度
        cArr.pop(); //移除最后一个元素
        //i是元素的索引，从0开始
        //e为当前处理的元素
        //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
        $("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
        })
        index--;
        if (index<0) {
            index=6;
        }
        show();
    }

    //下一张
    function nextimg(){
        cArr.push(cArr[0]); //向数组的末尾添加一个或更多元素 并返回新的长度
        cArr.shift(); //删除元素数组中的第一个值 并返回
        $("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
        })
        index++;
        if (index>6) {
            index=0;
        }
        show();
    }
</script>
</html>